<template>
	<view class="detail-back-icons" @click="navigateBack"></view>
	<view class="detail-box">
		<view class="detail-banner">
			<image src="/static/back.png" mode="widthFix"></image>
		</view>
		<view class="product-info">
			<view class="product-name">
				{{goodsName}}
			</view>
			<view class="product-description">
				七个魔力 | 热量~1.5个苹果
			</view>
			<view class="cup-type-selector" v-for="item,index in goodsData" :key="item+index">
				<view class="label">
					  {{item.name}}
				</view>
				<view class="options-row">
					<view class="option" :class="{ active: item.select === spec }" v-for="spec, sidx in item.value" :key="spec+sidx" @click="handleSelect(spec, item)">
						<img class="imgs" src="../../static/icon/bei.png" alt="">
						<text>{{spec}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="footer-buy">
		<view class="price-display">
			<view class="price-text-box">
				<text class="price">￥9.9</text>
				<text class="price-text">预估到手</text>
			</view>
			<view class="lin-quantity__selector">
				<view class="lin-quantity__selector-left" @click="handleMinus"></view>
				<text class="lin-quantity__selector-center">{{goodsCount}}</text>
				<view class="lin-quantity__selector-right" @click="handleAdd"></view>
			</view>
		</view>
		<view class="spec-text">
			【{{goodsName}}】
			<view style="display: inline-block;" v-for="specItem, sidx in goodsSelect" :key="specItem+sidx">{{sidx}}：{{specItem}} </view>
		</view>
		<view class="lin-button-group">
			<button class="button-left" @click="handleBuy">立即购买</button>
			<button class="button-right">加入购物车</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsSelect: {},
				goodsCount: 1,
				goodsName: "轻轻茉莉",
				goodsData: [
						{
							name: "杯型",
							value: ["大杯", "中杯"],
							select: ''
						},
						{
							name: "温度",
							value: ["冰", "热"],
							select: ''
						},
						{
							name: "糖度",
							value: ["标准甜", "少甜",  "不另外加糖"],
							select: ''
						}
				]
			}
		},
		methods: {
			navigateBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			handleAdd(){
				this.goodsCount ++
			},
			handleMinus(){
				if(this.goodsCount < 2) {
					return
				}
				this.goodsCount --
			},
			handleSelect(value, item) {
				item.select = value
				this.goodsSelect[item.name] = value
				console.log(this.goodsSelect);
			},
			handleBuy() {
				console.log(this.goodsData);
				uni.navigateTo({
					url: '/pages/order/order'
				})
			}
		}
	}
</script>

<style lang="less">
@import url(../../static/css/button/index.less);
@lin-default-font-color: #7d7d7d;
.detail-back-icons{
	position: fixed;
	z-index: 1;
	left: 20px;
	top: 30px;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: url("/static/icon/back.png") rgba(255, 255, 255, 0.5) no-repeat;
	background-size: 18px 18px;
	background-position: 6px center;
}
.detail-box {
	padding-bottom: 134px;
	.detail-banner {
		// height: 200px;
		background-color: #74a9db;
		position: relative;
		image {
			display: block;
			width: 100%;
		}
	}
	.product-info {
		padding: 20rpx 30rpx;
	}
	.product-name {
		font-weight: bold;
		font-size: 36rpx;
		padding-bottom: 20rpx;
	}
	.product-description {
		font-size: 24rpx;
		color: @lin-default-font-color;
		padding-bottom: 20rpx;
	}
	.cup-type-selector{
		display: flex;
		margin-bottom: 15rpx;
		.label {
			width: 100rpx;
			font-weight: bold;
			font-size: 28rpx;
			padding-right: 20rpx;
		}
		.options-row{
			display: flex;
			flex: 1;
			flex-wrap: wrap;
		}
		.option {
			border-radius: 5px;
			width: 30%;
			font-size: 22rpx;
			text-align: center;
			margin-right: 10rpx;
			margin-bottom: 15rpx;
			padding: 15rpx 0;
			background-color: #f7f7f7;
			&.active {
				background-color: #ebeeff;
				color: #0123ab;
				font-weight: bold;
			}
			.imgs {
				display: block;
				width: 61rpx;
				height: 61rpx;
				margin: 25rpx auto;
			}
		}
	}
}


.footer-buy {
	padding: 30rpx 30rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	border-top: 1px solid #dcdcdc;
	z-index: 1;
	background-color: #fff;
	.spec-text {
		font-size: 20rpx;
		color: @lin-default-font-color;
		padding-top: 10rpx;
	}
	.price-display {
		display: flex; 
		justify-content: space-between; 
	}

	.price {
		font-size: 38rpx;
		margin-right: 10px;
		font-weight: bold;
		color: #e96140;
	}
	.price-text{
		font-size: 24rpx;
		color: #e96140;
	}
}

</style>
